import React, { useState, useEffect, useContext } from 'react'
import { Card } from '&/appComponents/Antd'
import { Table } from 'antd'
import dayjs from 'dayjs'
import { ActivityLevelContext } from '../context'
const CityTable = () => {
  const handText = () => {
    return <span>全市数据分析</span>
  }
  const { type, allCity, setTableQuery } = useContext(ActivityLevelContext)
  const [columns, setColumns] = useState([])
  const [dataSource, setDataSource] = useState([])
  useEffect(() => {
    if (!allCity) return
    let format =
      type == 2
        ? 'MM' + '月' + 'DD' + '日' + 'HH' + '时'
        : 'MM' + '月' + 'DD' + '日'
    const column = [
      {
        title: '日期',
        width: 100,
        dataIndex: 'date',
        align: 'center'
      }
    ]
    allCity.forEach((v) => {
      column.push({
        title: dayjs(v.data_time).format(format),
        width: 120,
        dataIndex: v.data_time,
        align: 'center'
      })
    })
    // 全市用电量
    let list = [
      [{ date: '全市用电量' }],
      [{ date: '日变化率' }],
      [{ date: '基准值' }]
    ]
    allCity.forEach((i) => {
      let dataTime = {}
      let dataTage = {}
      let dataJizhun = {}
      dataTime[i.data_time] = i.data
      dataTage[i.data_time] = i.data_change_percentage
      dataJizhun[i.data_time] = i.standard_value
      i.data != -99 && list[0].push(dataTime)
      i.data_change_percentage != -99 && list[1].push(dataTage)
      i.standard_value != -99 && list[2].push(dataJizhun)
    })
    const dataSource = list.map((item) => {
      let a = {}
      item.map((i) => {
        a = { ...i, ...a }
      })
      return a
    })
    setTableQuery({ column, dataSource })
    setColumns(column)
    setDataSource(dataSource)
  }, [allCity])
  return (
    <div style={{ width: '100%', height: '390px' }}>
      <Card
        size="small"
        title={handText()}
        style={{ flex: 1 }}
        bodyStyle={{ height: 'calc(100% - 38px)' }}
      >
        <Table
          size="small"
          bordered
          dataSource={dataSource}
          columns={columns}
          pagination={false}
          rowKey={(row) => JSON.stringify(row)}
          scroll={{ y: '30vh' }}
        />
      </Card>
    </div>
  )
}
export default CityTable
